import React, { useState, useEffect } from "react";
import { Form, Button, DatePicker, Input, Select, Divider, Space } from "antd";
import { SearchOutlined, SyncOutlined } from "@ant-design/icons";
import SearchFormWarpper from "@/components/SearchFormWarpper";
import TableWarpper from "@/components/TableWarpper";
export const OnlineUser = () => {
  const [form] = Form.useForm();
  const [searchForm] = Form.useForm();
  const searchFormSetting = {
    span: 6,
    labelCol: 80,
    // menuRow: true,
    // expand: true,
    // maxFormLength: 3,
    columns: [
      {
        name: "username",
        label: "用户名",
        placeholder: "请输入用户名",
        allowClear: true,
        // slot: true,
        // component: <DatePicker style={{ width: "100%" }} />,
        // rules: [{ required: true, message: "请输入用户名!" }],
        // disabled: true,
      },
      {
        name: "datePicker",
        label: "日期时间",
        formType: "datePicker",
        allowClear: true,
        showTime: true,
        // picker: 'week', // week | month | quarter | year
        // rules: [{ required: true, message: '请选择日期!'}]
      },
    ],
  };

  const searchFormMenuSlot = (
    <span>
      <Button type="primary" htmlType="submit">
        <SearchOutlined />
        查询
      </Button>
      <Button
        style={{ marginLeft: "20px" }}
        htmlType="button"
        onClick={(e) => reset()}
      >
        <SyncOutlined />
        重置
      </Button>
    </span>
  );

  const queryFinish = (values) => {
    console.log("搜索", values);
  };
  const reset = () => {
    searchForm.resetFields();
  };

  //表格数据
  const columns = [
    {
      title: "序号",
      dataIndex: "",
      key: "index",
      width: 80,
      //   render: (_, record, index) => {
      //     return (
      //         <span>{index + 1}</span>
      //     )
      //   },
      render: (_, record, index) => index + 1,
    },
    {
      title: "用户名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      width: 180,
      render: (_, record, index) => (
        <span>{record.status == 1 ? "在线" : "离线"}</span>
      ),
    },
    {
      title: "地址",
      key: "address",
      dataIndex: "address",
    },
  ];

  const [data, setData] = useState([]);
  const [defaultCurrent, setDefaultCurrent] = useState(1);
  const [total, setTotal] = useState();

  useEffect(() => {
    let data1 = [];
    for (let i = 0; i < 46; i++) {
      data1.push({
        key: i,
        name: `Edward King ${i}`,
        status: 1,
        address: `London, Park Lane no. ${i}`,
      });
    }
    setData(data1);
    setTotal(data1.length);
  }, []);

  // 表格配置
  const tableSetting = {
    // rowSelection: rowSelection,
    columns: columns,
    data: data,
    bordered: false,
  };
  // 分页配置
  const paginationSetting = {
    showSizeChanger: true,
    showQuickJumper: true,
    defaultCurrent: defaultCurrent,
    total: total,
  };

  const onChangePage = (pageNum, pageSize) => {
    // console.log('e ======', pageNum, pageSize)
  };

  return (
    <div className="Index pageWarpper">
      <SearchFormWarpper
        searchFormSetting={searchFormSetting}
        searchFormMenuSlot={searchFormMenuSlot}
        handlequeryFinish={queryFinish}
        searchForm={searchForm}
      />

      <TableWarpper
        onChangePage={onChangePage}
        tableSetting={tableSetting}
        paginationSetting={paginationSetting}
      />
    </div>
  );
};

export default OnlineUser;
